<style scoped lang="less">
    .fromInput{
        width: 360px;
    }
    /deep/ .goodsDetailsPicture{
        width:94%;padding:14px;margin:auto;margin-bottom:30px;border:1px solid #ddd;
        overflow: hidden;
        img{
            display: block;
            width: 100%;
        }
    }
</style>
<template>
    <Card class="paymentSeting" dis-hover>
        <p slot="title" class="activePopup-title">提报商品详情</p>
        <div class="detail-content black_theme">
            <Form ref="formValidate" :model="formInfo" :label-width="120" :show-message="false">
                <Divider orientation="left">基本信息</Divider>
                <FormItem label="供应商：" required>
                    <Select v-model="pageInfo.supplierId" filterable clearable class="fromInput form-select" disabled>
                        <Option v-for="item in GoodsSupplierList"
                            :value="item['id']" 
                            :key="item['id']"
                        >{{ item['supBrandname'] }}</Option>
                    </Select>
                </FormItem>
                <FormItem label="商品品牌：" required>
                    <Select v-model="pageInfo.goodsBrandId" filterable clearable class="fromInput form-select" disabled>
                        <Option v-for="item in GoodsBrandList"
                            :value="item['id']" 
                            :key="item['id']"
                        >{{ item['brandName'] }}</Option>
                    </Select>
                </FormItem>
                <FormItem label="属性类目：" required>
                    <Select v-model="pageInfo.goodsCategoryId" filterable clearable class="fromInput form-select" disabled>
                        <Option v-for="item in categoryList"
                            :value="item['data']" 
                            :key="item['data']"
                        >{{ item['value'] }}</Option>
                    </Select>
                </FormItem>
                <FormItem label="商品编号" required>
                    <Input v-model="pageInfo.goodsNo" class="fromInput" clearable disabled ></Input>
                </FormItem>
                <div class="line-box">
                    <FormItem label="计量单位" required class="inline">
                        <Input v-model="pageInfo.goodsUnit" class="inline" clearable disabled ></Input>
                    </FormItem>
                    <FormItem label="限购数量" required class="inline">
                        <Input v-model="pageInfo.goodsPurchaseRestrictions" class="inline" clearable disabled ></Input>
                    </FormItem>
                    <FormItem label="最低起售" required class="inline">
                        <Input v-model="pageInfo.goodsLowestsaleCount" class="inline" clearable disabled ></Input>
                    </FormItem>
                </div>
                <FormItem label="商品标签" required>
                    <CheckboxGroup v-model="pageInfo.goodsKeywordList" >
                        <Checkbox label="正品保证" disabled></Checkbox>
                        <Checkbox label="15天无忧退换" disabled></Checkbox>
                        <Checkbox label="港澳台不发货" disabled></Checkbox>
                        <Checkbox label="包邮" disabled></Checkbox>
                    </CheckboxGroup>
                </FormItem>
                <FormItem label="适合季节" required>
                    <CheckboxGroup v-model="pageInfo.goodsSeasonList" disabled>
                        <Checkbox label="春" disabled></Checkbox>
                        <Checkbox label="夏" disabled></Checkbox>
                        <Checkbox label="秋" disabled></Checkbox>
                        <Checkbox label="冬" disabled></Checkbox>
                    </CheckboxGroup>
                </FormItem>

                <Divider orientation="left">商品规格</Divider>
                <FormItem label="规格模板：" required >
                    <Select v-model="pageInfo.goodsTypeId" filterable clearable class="fromInput form-select" disabled>
                        <Option v-for="item in GoodsSpecsList"
                            :value="item['id']" 
                            :key="item['id']"
                        >{{ item['scName'] }}</Option>
                    </Select>
                </FormItem>
                <template v-for="item in goodsSpecTypelist">
                    <FormItem :label="item.stSpecName" >
                        <CheckboxGroup v-model="pageInfo.goodsSpecList">
                            <Checkbox :label="it.valueName" v-for="it in item.specValueDTOS" disabled></Checkbox>
                        </CheckboxGroup>
                    </FormItem>
                </template>
                
                <div style="margin-bottom:24px;">
                    <Table 
                        :columns="columns_spec" :data="goodsSpecs" 
                        stripe border disabled
                    ></Table>
                </div>

                <Divider orientation="left">主标图文</Divider>
                <FormItem label="商品标题" required>
                    <Input v-model="pageInfo.goodsName" class="fromInput" clearable disabled></Input>
                </FormItem>
                <FormItem label="商品副标题">
                    <Input 
                        type="textarea" 
                        v-model="pageInfo.goodsDesc" 
                        placeholder="副标题" 
                        class="fromInput" disabled autosize
                    ></Input>
                </FormItem>
                <FormItem label="上传图片">
                    <p style="color:#999;font-size:12px;">第一张为主图，最多可以添加10张图，支持一次多选图片，点击图片可以更改</p>
                    <div class="goodsPicture">
                        <div v-for="item in pageInfo.goodsPictureList" style="width:100px; margin-right:10px;" class="inline">
                            <img :src="item" alt="" style="width:100%;">
                        </div >
                    </div>
                </FormItem>

                <Divider orientation="left">商品详情</Divider>
                <div class="goodsDetailsPicture" v-html="pageInfo.goodsDetailsPicture"></div>

                <Divider orientation="left">其他设置</Divider>
                <FormItem label="运费模板" required>
                    <RadioGroup v-model="pageInfo.isCarriage" >
                        <Radio :label="2" class="black_theme" size="large" disabled>包邮</Radio>
                        <Radio :label="1" class="black_theme" size="large" disabled>买家承担运费</Radio>
                    </RadioGroup>
                    <Select v-model="pageInfo.carriageTemplateId" disabled filterable clearable class="fromInput form-select inline" v-show="pageInfo.isCarriage==1">
                        <Option v-for="item in GoodsFreightList"
                            :value="item['id']" 
                            :key="item['id']"
                        >{{ item['scName'] }}</Option>
                    </Select>
                </FormItem>
                <Divider orientation="left" v-if="diffSpecsDTO_data.length || commodityDiffDTO_data.length">变动信息</Divider>
                <div style="margin-bottom:24px;" v-if="diffSpecsDTO_data.length">
                    <Table 
                        :columns="diffSpecsDTO_col" :data="diffSpecsDTO_data" 
                        stripe border disabled
                    >
                        <template slot-scope="{row}" slot='newSpeTagPriceId'>
                            <div>
                                <p :style="{color:row.speTagPrice!==row.newSpeTagPrice?'red':'#515a6e'}">{{row.newSpeTagPrice}}</p>
                            </div>
                        </template>
                        <template slot-scope="{row}" slot='newSpeCostPriceId'>
                            <div>
                                <p :style="{color:row.speCostPrice!==row.newSpeCostPrice?'red':'#515a6e'}">{{row.newSpeCostPrice}}</p>
                            </div>
                        </template>
                        <template slot-scope="{row}" slot='newSpeVipPriceId'>
                            <div>
                                <p :style="{color:row.speVipPrice!==row.newSpeVipPrice?'red':'#515a6e'}">{{row.newSpeVipPrice}}</p>
                            </div>
                        </template>
                    </Table>
                </div>
                <div style="margin-bottom:24px;" v-if="commodityDiffDTO_data.length">
                    <Table 
                        :columns="commodityDiffDTO_col" :data="commodityDiffDTO_data" 
                        stripe border disabled
                    >
                        <template slot-scope="{row}" slot='newId'>
                            <div>
                                <p :style="{color:row.old!==row.new?'red':'#515a6e'}">{{row.new}}</p>
                            </div>
                        </template>
                    </Table>
                </div>

                <FormItem v-if="$route.query.state=='1'">
                    <Button type="primary" @click="click_audit">审核</Button>
                </FormItem>
            </Form>
        </div>
        <audit-popup v-model="AuditPopup_visble" :id="pageId" @ok="handleSubmit"></audit-popup>
    </Card>
</template>
<script>
import { mapState, mapActions, mapMutations } from 'vuex'
import AuditPopup from './components/AuditPopup';
import { getPermissionId, getNameOrKey } from '_libs/util';

export default {
    name: "GoodsAuditListDetail",
    props: ['pageId'],
    components: { AuditPopup },
    data() {
        return {
            save_loading: false,
            pageInfo: {},
            goodsSpecs: [],
            columns_spec: [
                // {type: 'selection',width: 50, align:'center'},
                {key: 'speType', title: '规格', align:'center'},
                {key: 'speNo', title: '货号(商品条形码)', align:'center'},
                {key: 'gmSpeId', title: '货品ID', align:'center'},
                {key: 'speSku', title: '现有库存', align:'center'},
                {key: 'spePreSku', title: '调整库存', align:'center'},
                {key: 'speWeight', title: '重量(g)', align:'center'},
                {key: 'speTagPrice', title: '吊牌价(元)', align:'center'},
                {key: 'speCostPrice', title: '供货价(元)', align:'center'},
                {key: 'speVipPrice', title: '价格(元)', align:'center'},
                {key: 'speGrossProfit', title: '毛利润(元)', align:'center'},
            ],
            goodsSpecTypelist: [],
            //弹窗
            AuditPopup_visble: false,
            //新增
            diffSpecsDTO_data: [],
            diffSpecsDTO_col: [ //规格信息
                {title: 'SKU属性',align: 'center',children: [
                    {key: 'speType', title: '规格', align:'center'},
                    {key: 'speNo', title: '货号', align:'center'},
                ]},
                {title: '修改前',align: 'center',children: [
                    {key: 'speTagPrice', title: '吊牌价', align:'center'},
                    {key: 'speVipPrice', title: '成交价', align:'center'},
                    {key: 'speCostPrice', title: '供货价', align:'center'},
                ]},
                {title: '修改后',align: 'center',children: [
                    {key: 'newSpeTagPrice', title: '吊牌价', align:'center', slot:'newSpeTagPriceId'},
                    {key: 'newSpeVipPrice', title: '成交价', align:'center', slot:'newSpeVipPriceId'},
                    {key: 'newSpeCostPrice', title: '供货价', align:'center', slot:'newSpeCostPriceId'},
                ]},
            ],
            commodityDiffDTO_data: [],
            commodityDiffDTO_col: [ //商品信息
                {key: 'type', title: '商品属性', align:'center'},
                {key: 'old', title: '修改前', align:'center'},
                {key: 'new', title: '修改后', align:'center', slot:'newId'},
            ],
        }
    },
    computed: {
        ...mapState({
            categoryList: state => state.user.addGoodsCategoryList,
            GoodsSupplierList: state => state.user.GoodsSupplierList,
            GoodsBrandList: state => state.user.GoodsBrandList,
            GoodsFreightList: state => state.user.GoodsFreightList,
            GoodsSpecsList: state => state.user.GoodsSpecsList,
        }),
    },
    created() {
        this.handleGoodsCategoryList();
        this.handleGoodsSupplierList();
        this.handleGoodsBrandList();
        this.handleGoodsFreightList();
        this.handleGoodsSpecsList();
        this._pageInit();
    },
    methods: {
        ...mapMutations([
            'closeTag'
        ]),
        ...mapActions([
            'handleGoodsCategoryList',
            'handleGoodsSupplierList',
            'handleGoodsBrandList',
            'handleGoodsFreightList',
            'handleGoodsSpecsList',
        ]),
        click_audit(){
            this.AuditPopup_visble = true;
        },
        handleSubmit() {
            this.$refs['formValidate'].validate(async (valid) => {
                if (valid) {
                    this.save_loading = true
                    let requedata = this.$cloneObj(this.formInfo);
                    requedata.sellerConfirmId = this.id;
                    let res = await this.$post('orderReviewByPlat',requedata);
                    this.save_loading = false
                    if(res) {
                        this.$tipsMessage('审核成功',1);
                        this.Modal_cencel();
                        this.$emit('ok');
                    }
                } else {
                    this.$tipsMessage('提交失败');
                }
            });
            
            this.bus.$emit('refresh',this.$route.name);
            this.closeTag(this.$route);
        },
        optStatus(content,ss) {
            let res = '';
            if(content && content.length){
                if(content[0]) res = content[0][ss||'label'];
            };
            return res;
        },
        async _pageInit(){
            let res = await this.$get('goodsAuditDetail',{goodsId: this.pageId});
            if(res){
                if(res.goodsKeyword) res.goodsKeywordList = res.goodsKeyword.split('.');
                if(res.goodsSeason) res.goodsSeasonList = res.goodsSeason.split(',');
                if(res.goodsPicture) res.goodsPictureList = res.goodsPicture.split(',');
                if(res.goodsSpecIndex && res.goodsSpecIndex.length) res.goodsSpecList = res.goodsSpecIndex.map((el,ix) => {
                    return el.stSpecName
                })
                this.pageInfo = res;
                this.diffSpecsDTO_data = res.diffSpecsDTO || [];
                
                if(res.commodityDiffDTO&&res.commodityDiffDTO.goodsCategoryId) {
                    let diff = res.commodityDiffDTO || {};
                    let diffList = [
                        {type: '分类', old: this.optStatus(getNameOrKey(this.categoryList,r=>r.data==diff.goodsCategoryId),'value'), new: this.optStatus(getNameOrKey(this.categoryList,r=>r.data==diff.newGoodsCategoryId),'value')},
                        {type: '限购数量', old:diff.goodsPurchaseRestrictions, new:diff.newGoodsPurchaseRestrictions},
                        {type: '最低起售', old:diff.goodsLowestsaleCount, new:diff.newGoodsLowestsaleCount},
                        {type: '运费模板', old: this.optStatus(getNameOrKey(this.GoodsFreightList,r=>r.id==diff.carriageTemplateId),'scName'), new: this.optStatus(getNameOrKey(this.GoodsFreightList,r=>r.id==diff.newCarriageTemplateId),'scName')},
                        {type: '包邮\不包邮', old:diff.isCarriage==1?'包邮':'不包邮', new:diff.newIsCarriage==1?'包邮':'不包邮'},
                    ];
                    this.commodityDiffDTO_data = diffList;
                }

                this.goodsSpecs = this.$cloneObj(res.goodsSpecs);
                let res1 = await this.$get('goodsSpecTypelist',{stTypeId: res.goodsTypeId});
                this.goodsSpecTypelist = res1;
            }
        }
    },
    watch: {
    }
};
</script>
